<template>
  <div>
    <!-- v-bind 指令 -->
    <!-- 作用: 动态绑定标签的属性, 例如动态设置 a 标签的 href / img 的 src ... -->
    <a href="https://www.baidu.com">去百度</a>
    <!-- 
      语法: 
      v-bind:属性名="属性值变量"
      v-bind: 太长了, 所以 vue 给我们提供了简写
      :属性名="变量"
      vue 响应式的特性, 只要变量发生了变化
      所有用到变量的地方, 都会同步更新
     -->
    <a v-bind:href="url">去黑马</a>
    <img :src="img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.itheima.com',
      img: 'https://img2.baidu.com/it/u=341960786,751829958&fm=253&fmt=auto&app=138&f=JPEG?w=430&h=420'
    }
  }
}
</script>

<style>

</style>